<template>
    <div class="login">
        <HelloWorld @clickRight="setBgColor"/>

    <!-- 登录 -->
    <div class="form">
        <!-- 手机号码 -->
        <div>
             <span>手机号码：</span>
             <input type="text" v-model="phone">
             <!-- 图标 -->
             <i class="iconfont" :class="isPhone?'icon-zhengqueshixin':'icon-cuowu'" v-if="phone.length"></i>
        </div>
        <!-- 密码 -->
        <div>
              <span>账号密码：</span>
              <input type="text" v-model="pwd" >
              <!-- 图标 -->
               <i class="iconfont" :class="isPwd?'icon-zhengqueshixin':'icon-cuowu'" v-if="pwd.length"></i>
        </div>
        <!-- 只要任何一个校验不通过，就禁用 -->
        <button :disabled="!isPhone || !isPwd" v-bgColor @click="login">登录</button>
    </div>
    </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
    data() {
        return {
            phone:'',
            pwd:''
        }
    },
    computed: {
        isPhone(){
            let reg = /^1[3456789]\d{9}$/
            // test()   是正则校验的方法  通过返回true  不通过返回false
            return reg.test(this.phone)

        },
        isPwd(){
            // 第一位是字母 剩下随意  必须是6位
            let reg = /^[a-zA-Z][a-zA-Z0-9]{5}$/
            return reg.test(this.pwd)
        }
    },
    methods: {
        setBgColor(){
            this.$store.commit('setBgColor')
        },
        login(){
            this.$router.push('/')
        }
    },
    components:{
        HelloWorld
    }
}
</script>
<style lang="scss" scoped>
.login{
    text-align: center;
    background:green;
    .form{
        padding-top:50px;
    }
}
</style>

